<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>违约管理 - 管理后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
        <div class="container-fluid">
            <a class="navbar-brand" href="/admin/index.html">
                <i class="bi bi-shield-check"></i> 管理后台
            </a>
            <div class="ms-auto">
                <span class="navbar-text text-white me-3">
                    <i class="bi bi-person-circle"></i> <span id="adminName"></span>
                </span>
                <a href="#" class="btn btn-outline-light btn-sm" id="logoutBtn">
                    <i class="bi bi-box-arrow-right"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 sidebar">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/index.html">
                            <i class="bi bi-speedometer2"></i> 数据统计
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/seats.html">
                            <i class="bi bi-grid-3x3"></i> 座位管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/bookings.html">
                            <i class="bi bi-calendar-check"></i> 预约管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/admin/violations.html">
                            <i class="bi bi-exclamation-triangle"></i> 违约管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/users.html">
                            <i class="bi bi-people"></i> 用户管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/config.html">
                            <i class="bi bi-gear"></i> 系统配置
                        </a>
                    </li>
                </ul>
            </div>

            <div class="col-md-10 p-4">
                <h4 class="page-header"><i class="bi bi-exclamation-triangle"></i> 违约管理</h4>

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户ID</th>
                                        <th>违约类型</th>
                                        <th>扣除分数</th>
                                        <th>违约时间</th>
                                        <th>申诉状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="violationList"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="appealModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">处理申诉</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <h6>申诉理由：</h6>
                        <p id="appealReason"></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">处理结果</label>
                        <textarea class="form-control" id="handleResult" rows="3" placeholder="请填写处理结果"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="handleAppeal(false)">拒绝</button>
                    <button type="button" class="btn btn-success" onclick="handleAppeal(true)">通过</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script src="/js/request.js"></script>
    <script>
        var layer;
        layui.use('layer', function(){
            layer = layui.layer;
        });
    </script>
    <script>
        let currentViolationId = null;
        let appealModal = null;

        $(document).ready(function() {
            if (!request.checkLogin()) return;
            const user = request.getUserInfo();
            if (user.role !== 'ADMIN') {
                window.location.href = '/index.html';
                return;
            }
            $('#adminName').text(user.name);
            appealModal = new bootstrap.Modal(document.getElementById('appealModal'));
            loadViolations();
            $('#logoutBtn').click(function(e) {
                e.preventDefault();
                request.logout();
            });
        });

        function loadViolations() {
            request.get('/api/admin/violation/list').then(data => {
                let html = '';
                data.forEach(v => {
                    const appealBadge = getAppealBadge(v.appealStatus);
                    html += `
                        <tr>
                            <td>${v.id}</td>
                            <td>${v.userId}</td>
                            <td>${getViolationType(v.violationType)}</td>
                            <td><span class="text-danger">-${v.deductScore}</span></td>
                            <td>${formatTime(v.violationTime)}</td>
                            <td>${appealBadge}</td>
                            <td>
                                ${v.appealStatus === 'PENDING' ? `<button class="btn btn-sm btn-primary" onclick="showAppealModal(${v.id}, '${v.appealReason}')">处理申诉</button>` : '-'}
                            </td>
                        </tr>
                    `;
                });
                $('#violationList').html(html);
            });
        }

        function getViolationType(type) {
            const map = {
                'NO_CHECKIN': '预约后未签到',
                'NO_CHECKOUT': '签到后未签退',
                'LEAVE_TIMEOUT': '临时离开超时'
            };
            return map[type] || type;
        }

        function getAppealBadge(status) {
            if (!status) return '<span class="badge bg-secondary">未申诉</span>';
            const map = {
                'PENDING': '<span class="badge bg-warning">待审核</span>',
                'APPROVED': '<span class="badge bg-success">已通过</span>',
                'REJECTED': '<span class="badge bg-danger">已拒绝</span>'
            };
            return map[status] || status;
        }

        function showAppealModal(id, reason) {
            currentViolationId = id;
            $('#appealReason').text(reason);
            $('#handleResult').val('');
            appealModal.show();
        }

        function handleAppeal(approved) {
            const result = $('#handleResult').val().trim();
            if (!result) {
                layer.msg('请填写处理结果', {icon: 2});
                return;
            }

            request.put(`/api/admin/violation/${currentViolationId}/handle`, {
                approved: approved,
                result: result
            }).then(() => {
                appealModal.hide();
                layer.msg('处理成功', {icon: 1});
                loadViolations();
            });
        }

        function formatTime(time) {
            if (!time) return '-';
            return time.replace('T', ' ').substring(0, 16);
        }
    </script>
</body>
</html>

